Vue.component('encapsulated-date-picker', {
    template: `
        <el-date-picker
            v-model="time"
            :type="type"
            :placeholder="placeholder"
            :size="size"
            :clearable="clearable"
            :value-format="valueFormats"
            :format="vFormat"
            :disabled="disabled"
            :picker-options="pickerOptions"
            :default-value="defaultValue"
            range-separator="/"
            start-placeholder='开始日期'
            end-placeholder='结束日期'
            @change="$emit('change', time)"
       />
    `,
    props: {
        value: {
            type: [String, Array, Date],
            default: ''
        },
        defaultValue: {
            type: Date,
            default: () => new Date()
        },
        type: {
            type: String,
            default: 'date'
        },
        format: {
            type: String,
            default: ''
        },
        valueFormat: {
            type: String,
            default: 'yyyy-MM-dd'
        },
        size: {
            type: String,
            default: () => ''
        },
        clearable: {
            type: Boolean,
            default: true
        },
        disabled: {
            type: Boolean,
            default: false
        },
        placeholder: {
            type: String,
            default: ''
        },
        pickOptions: {
            type: Object,
            default: () => {}
        },
        defaultDate: {
            type: Boolean,
            default: false,
            desc: '是否默认当前日期'
        }
    },
    data: function() {
        return {
            time: '',
            vFormat: '',
            valueFormats: '',
            pickerOptions: {
                shortcuts: []
            }
        }
    },
    watch: {
        type: {
            handler(val) {
                if (val === 'date') {
                    this.valueFormats = 'yyyy-MM-dd'
                    if (this.format) {
                        this.vFormat = this.format
                    } else {
                        this.vFormat = 'yyyy-MM-dd'
                    }
                    if (this.pickOptions) {
                        this.pickerOptions = this.pickOptions
                    } else {
                        this.pickerOptions = {}
                    }
                } else if (val === 'daterange') {
                    this.valueFormats = 'yyyy-MM-dd'
                    this.vFormat = 'yyyy-MM-dd'
                    this.pickerOptions = {}
                } else if (val === 'week') {
                    this.pickerOptions = { firstDayOfWeek: 1 }
                    this.vFormat = this.format
                } else if (val === 'year') {
                    this.valueFormats = 'yyyy'
                    this.vFormat = 'yyyy'
                    this.pickerOptions = {}
                } else if (val === 'datetimerange') {
                    this.valueFormats = 'yyyy-MM-dd HH:mm'
                    this.vFormat = 'yyyy-MM-dd HH:mm'
                    this.pickerOptions = {}
                } else if (val === 'month') {
                  this.valueFormats = 'yyyy-MM'
                  this.vFormat = 'yyyy-MM'
                  this.pickerOptions = {}
                } else {
                    this.pickerOptions = {}
                }
            },
            deep: true,
            immediate: true
        },
        value: {
            handler(val) {
                this.time = val
            },
            deep: true,
            immediate: true
        },
        time: {
            handler() {
                this.$emit('input', this.time)
            },
            deep: true,
            immediate: true
        }
    },
    mounted() {
        if (this.getParameter('formId') && this.defaultDate) {
            this.$nextTick(() => {
                let date = new Date()
                this.$emit('input', date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate())
            })
        }
    },
    methods: {
        getParameter: function (name) {
            var query = window.location.search.substring(1);
            if(query!==''){
                var vars = query.split("&");
                for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    if(pair.length === 2){
                        if(pair[0] === name){return pair[1];}
                    }
                }
            }
            return null;
        }
    }
})
